﻿@using ZhongKeSite.Entity;
@{
    Company company = ViewBag.CompanyInfo;
}
<div class="page-solution">
    <div class="vidBox" id="vidBox">
        <div class="videCont">
            <a class="btn-close" id="btn-close" href="javascript:void(0);"><i class="iconfont iconsearchclose"></i></a>
            <video src="/portal/img/about.mp4" loop controls></video>
        </div>
    </div>
    <section class="s1">
        <video autoplay poster="/portal/img/home_01.jpg" id="videobg" loop>
            <source src="/portal/img/about.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
        </video><a class="detail" id="openVideo" href="javascript:void(0);">详细</a>
    </section>
    <section class="s2" style="background-image:url(/portal/img/sulo_01.jpg);">
        <div class="container">
            <div class="txt">
                <h2 class="text80 wow fadeInUp">UPLIFT</h2>
                <h3 class="text50 wow fadeInUp" data-wow-delay="0.5s">无人化垂直农业生产系统</h3>
                <div class="des text20">
                    <p class="wow fadeInUp">UPLIFT 是一套无人化垂直室内农业生产解决方案。</p>
                    <p class="wow fadeInUp" data-wow-delay="0.5s">基于自身数字化生产系统，UPLIFT 生产车间已实现播种、分栽、采收、管理等重要工序无人化。人工智能令室内垂直农业焕发生机，种植面积向超高或地下空间扩展。 </p>
                    <p class="wow fadeInUp" data-wow-delay="1s">随着地球空间资源趋紧，UPLIFT 是未来⼈类必需的城市植物⼯⼚。依据建筑空间提供整体建设方案，现向全球种植者开放。</p>
                </div>
            </div>
        </div>
    </section>
    <section class="s3" style="background-image:url(/portal/img/sulo_02.jpg);"></section>
    <section class="s4">
        <div class="container">
            <h3 class="text50 wow fadeInUp">无人种植产线</h3>
            <div class="des text20 text50 wow fadeInUp" data-wow-delay="0.5s">
                <p>UPLIFT 各工站模块依托于机器人、穿梭机、人工智能产线等，实现播种、分栽、采收、清洗等工序自动化。可根据种植者需求，远程实时完成种植及采收调度、巡检，多任务协同调度。</p>
            </div>
        </div>
    </section>
    <section class="s5" style="background-image:url(/portal/img/sulo_03.jpg);">
        <div class="row no-gutters">
            <div class="col">
                <h4 class="text30 wow fadeInUp">播种</h4>
            </div>
            <div class="col">
                <h4 class="text30 wow fadeInUp">催芽</h4>
            </div>
            <div class="col">
                <h4 class="text30 wow fadeInUp">分栽</h4>
            </div>
            <div class="col">
                <h4 class="text30 wow fadeInUp">清洗</h4>
            </div>
            <div class="col">
                <h4 class="text30 wow fadeInUp">巡检</h4>
            </div>
        </div>
    </section>
    <section class="s4 s6">
        <div class="container">
            <h3 class="text50 wow fadeInUp">数字生产系统</h3>
            <div class="des text20 wow fadeInUp" data-wow-delay="0.5s">
                <p>PLANT KEEPER 是由 SANANBIO 自主研发的数字化生产管理系统入口。该系统具备独立的数据存储与分析运算能力，可帮助种植者实现环境控制与调节、光周期控制与调节、生长数据的采集与分析等服务。</p>
            </div>
            <figure class="pic"><img src="/portal/img/sulo_04.png" alt=""></figure>
        </div>
    </section>
    <section class="s7" style="background-image:url(/portal/img/sulo_05.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="sliders">
                        <div class="swiper-container swiper-s7">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="txt">
                                        <h3 class="title text50">气候管理</h3>
                                        <div class="des text20">
                                            <p>实时监测植物工厂内的温度、湿度、C02浓度、风速等，并进行统一管理。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="txt">
                                        <h3 class="title text50">气候管理</h3>
                                        <div class="des text20">
                                            <p>实时监测植物工厂内的温度、湿度、C02浓度、风速等，并进行统一管理。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="txt">
                                        <h3 class="title text50">气候管理</h3>
                                        <div class="des text20">
                                            <p>实时监测植物工厂内的温度、湿度、C02浓度、风速等，并进行统一管理。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="pic wow fadeInRight"><img src="/portal/img/sulo_06.png" alt=""></div>
                </div>
            </div>
        </div>
    </section>
    <section class="s4 s8">
        <div class="container">
            <h3 class="text50 wow fadeInUp">垂直空间扩展</h3>
            <div class="des text20 wow fadeInUp" data-wow-delay="0.5s">
                <p>基于无人化种植和数字生产系统管理技术，UPLIFT 得以向超高或地下垂直空间扩展，帮助种植者实现全年工业规模生产绿叶蔬菜。</p>
            </div>
            <div class="pic">
                <div class="row">
                    <div class="col-md">
                        <div class="item wow fadeInUp"><img src="/portal/img/sulo_07.jpg" alt=""></div>
                        <h4 class="text30 wow fadeInUp">无人的</h4>
                    </div>
                    <div class="col-md">
                        <div class="item wow fadeInUp"><img src="/portal/img/sulo_08.jpg" alt=""></div>
                        <h4 class="text30 wow fadeInUp">摩天的</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="comment-s9">
        <div class="container">
            <h3 class="text-center text50 wow fadeInUp">可种植作物</h3>
        </div>
        <div class="pic wow fadeInUp">       <img src="/portal/img/sulo_09.jpg" alt=""></div>
    </section>
    <section class="comment-s10">
        <div class="container text-center">
            <h2 class="title text80 wow fadeInUp">UPLIFT</h2>
            <h3 class="title1 text50 wow fadeInUp" data-wow-delay="0.5s">无人化垂直农业生产系统</h3>
            <div class="des text20 wow fadeInUp" data-wow-delay="1s">
                <p><span>无人种植车间</span>|<span>数字生产系统</span>|<span>超高空间扩展</span></p>
            </div>
        </div>
        <div class="pic wow fadeInUp">              <img src="/portal/img/sulo_10.jpg" alt=""></div><a class="download wow fadeInUp" href="#">参数下载</a>
    </section>
    <section class="comment-s11">
        <div class="container">
            <h3 class="text-center text50 wow fadeInUp">成功案例</h3>
        </div>
        <div class="swiper-container swiper-s11">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="/portal/img/sulo_11.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/portal/img/sulo_11.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/portal/img/sulo_11.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    <section class="comment-s12">
        <div class="container">
            <h3 class="text-center text50 wow fadeInUp">告诉我们您需要哪方面的支持</h3>
        </div>
        <div class="s3-formcontact">
            <div class="container">
                <div class="row">
                    <div class="col-md">
                        @{Html.RenderPartial("UcEmail");}
                    </div>
                    <div class="col-auto">
                        <div class="contact">
                            <h4 class="title wow fadeInUp"> 通过电话或邮箱寻求支持</h4>
                            <div class="item wow fadeInUp">
                                <div class="pic"><i class="iconfont icondianhua"></i></div>
                                <div class="title">服务热线</div>
                                <div class="val">@company.ServicePhone</div>
                            </div>
                            <div class="item wow fadeInUp">
                                <div class="pic"><i class="iconfont iconyouxiang"></i></div>
                                <div class="title">联系邮箱                                    </div>
                                <div class="val">@company.Email</div>
                                <div class="val">@company.ServiceEmail</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts {
    <script src="~/portal/js/vendor/swiper/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-s7', {
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            }
        });

        var swiper2 = new Swiper('.swiper-s11', {
            slidesPerView: 'auto',
            centeredSlides: true,
            spaceBetween: 120,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination'
            },
        });
        $(function () {

            $("#openVideo").click(function (e) {
                $("#vidBox").fadeIn();
            })
            $("#btn-close").click(function (e) {
                $("#vidBox").fadeOut();
            })

        });
    </script>
}